<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 事件修饰符知识有(待学习完善)
        .stop
        .prevent
        .capture
        .self
        .once
        .passive

         阻止单击事件继续传播 
        <a v-on:click.stop="doThis"></a>

         提交事件不再重载页面 
        <form v-on:submit.prevent="onSubmit"></form>

         ！！！修饰符可以串联 
        <a v-on:click.stop.prevent="doThat"></a>

         只有修饰符 
        <form v-on:submit.prevent></form>

         添加事件监听器时使用事件捕获模式 
         即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 
        <div v-on:click.capture="doThis">...</div>

         只当在 event.target 是当前元素自身时触发处理函数 
         即事件不是从内部元素触发的 
        <div v-on:click.self="doThat">...</div>

        点击事件将只会触发一次
        <a v-on:click.once="doThis"></a>
    -->


</head>
<body>
    <div id="app">
        <h1>点击次数{{count}}</h1>
        <button @click="fun(1)">1</button><br />
        <!-- Vue事件修饰禁止跳转 -->
        <a href="edoujin.net" @click.prevent="fun(1)">edoujin01(带函数的阻止默认操作修饰符)</a>
        <br />
        <a href="edoujin.net" @click.prevent>edoujin01(不带函数的阻止默认操作修饰符)</a>
        <br />
        <!-- 原生JS方法禁止跳转 -->
        <a href="https://edoujin.net/">edoujin02</a>
    </div>

    <script src="vue.js"></script>
    <script>
        new Vue({
            // 作用域绑定
            el:"#app",
            // 数据存放
            data:function(){
                return {
                    count:0
                }
            },
            // 方法存放
            methods:{
                fun(num,event){
                    console.log(num,event);
                    this.count+=num;
                }
            },
            // 计算属性
            computed:{

            },
            // 侦听器
            watch:{

            }
        })
    </script>
</body>
</html>